<template>
  <MainContentSearchBarWrapper>
    <SearchBar inline>
      <template #normal>
        <el-form-item label="标签名称">
          <el-input v-model="tableForm.name" clearable placeholder="请输入标签名称"></el-input>
        </el-form-item>
        <!--        <ins-cascader-filter-->
        <!--          @change="(value) => (tableForm.queryInsIds = value)"-->
        <!--        ></ins-cascader-filter>-->

      </template>

      <template #toolbar>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="primary" v-has="['120201']" @click="isAdd = true">新建标签</el-button>
          <el-button type="primary" v-has="['120202']" @click="isExport = true">批量导入</el-button>
          <el-button type="primary" @click="toSetGroup" v-has="['120206']">批量修改分组</el-button>
          <!-- TODO 加权限 -->
          <el-button type="primary" @click="showExportData = true">导出</el-button>
        </el-form-item>
      </template>
    </SearchBar>

    <LayoutTable ref="attributeRef" url="/user/propertyEntity/pageList" disable-auto-height :rowKey="(row) => {
        return String(row.id);
      }
      " :param="tableForm" @selection-change="selectionChange">
      <el-table-column type="selection" :reserve-selection="true" width="55" />
      <el-table-column prop="propertyName" label="标签名称" min-width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.classifyType == 1"> 系统 </el-tag>
          {{ scope.row.propertyName }}
        </template>
      </el-table-column>
      <el-table-column prop="propertyKey" label="标签CODE" min-width="100"></el-table-column>

      <el-table-column prop="createUserName" label="创建人" min-width="100"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="100">
        <template #default="scope">
          <div>
            {{ $filters.dateFormat(scope.row.createTime) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <div>
            <el-button style="margin-right: 10px" type="text" @click="toEditor(scope.row)" v-has="['120203']">
              编辑
            </el-button>

            <el-button @click="del(scope.row)" type="text" v-has="['120204']">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </LayoutTable>
    <add-attribute @confirmAdd="confirmAdd" @cancelAdd="cancelAdd" :isAdd="isAdd" :addData="addData"></add-attribute>
    <export-attribute @confirmExoprt="confirmExoprt" @cancelExport="cancelExport" :isExport="isExport"></export-attribute>
  </MainContentSearchBarWrapper>
  <setGroup :showDialog="setGroup" :selectionList="selectionList" @confirm="confirm" @cancel="cancel"></setGroup>
  <exportData v-model:show-dialog="showExportData" :search-data="tableForm" title="标签管理" export-type="tagInfoExport">
  </exportData>
</template>
<script>
import CustomerApi from "@/api/customerApi";
import exportAttribute from "./exportAttribute.vue";
import AddAttribute from "./addAttribute.vue";
import setGroup from "./setGroup.vue";
import exportData from "@/components/exportData/exportData.vue";
export default {
  components: { exportAttribute, AddAttribute, setGroup, exportData },
  name: "CustomerTagList",
  props: {
    categoryId: {
      type: [Number, String],
      default: () => {
        return ""
      }
    },
  },

  data() {
    return {
      showExportData: false,
      isExport: false,
      isAdd: false,
      setGroup: false,
      addData: { id: null },
      selectionList: [],
      formData: {},
      tableForm: {
        name: "",
        queryInsIds: [],
        categoryId: "",
      },
    };
  },
  watch: {
    categoryId: {
      immediate: true,
      handler(val) {
        this.tableForm.categoryId = val;
      }
    },
  },
  methods: {
    toSetGroup() {
      if (!this.selectionList.length) {
        ElMessage.warning("请先选择需要修改的标签");
        return;
      }
      this.setGroup = true;
    },
    // 添加标签
    async addUserGroup() {
      let rs = await CustomerApi.addUserGroup(this.formData);
      if (rs.code == 200) {
        ElMessage.success("添加标签成功");
        this.isAdd = false;
        this.onSearch();
      }
    },
    // 编辑标签
    toEditor(row) {
      this.isAdd = true;
      this.addData = JSON.parse(JSON.stringify(row));
      console.log("[ row ] >", row);
    },
    async delAttribute(row) {
      let rs = await CustomerApi.delAttribute({ id: row.id, name: row.propertyName });
      if (rs.code == 200) {
        ElMessage.success("删除标签成功");
        this.onSearch();
      }
    },
    del(row) {
      ElMessageBox.confirm("此操作将删除该标签, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.delAttribute(row);
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    confirm(nodeId) {
      this.onSearch();
      this.$refs.attributeRef.$refs.elTable.clearSelection();
      this.selectionList = [];
      this.$emit("setNodeId", nodeId);
    },
    cancel() {
      this.setGroup = false;
    },

    selectionChange(val, row) {
      this.selectionList = val;
    },

    addCustomerGroup() { },
    confirmAdd(nodeId) {
      this.onSearch();
      this.$emit("setNodeId", nodeId);
      this.cancelAdd();
    },
    cancelAdd() {
      this.isAdd = false;
      this.addData = { id: null };
    },
    confirmExoprt() {
      this.onSearch();
      this.cancelExport();
    },
    cancelExport() {
      this.isExport = false;
    },

    resetForm() {
      this.tableForm = {
        name: "",
      };
      this.onSearch();
    },

    onSearch() {
      this.$nextTick(() => {
        this.$refs.attributeRef.search();
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
